<template>
	<div>
		<!-- <div
      v-if="article.image"
      id="banner"
      class="
        uk-height-small
        uk-flex
        uk-flex-center
        uk-flex-middle
        uk-background-cover
        uk-light
        uk-padding
      "
      :data-src="getStrapiMedia(article.image.url)"
      uk-img
    >
      <h1>{{ article.title }}</h1>
    </div> -->
		<div class="uk-section">
			<div class="uk-container uk-container-large">
				<!-- eslint-disable vue/no-v-html -->
				<h3 style="text-align: center">{{ article.title }}</h3>
				<div v-if="article.content" id="editor" v-html="$md.render(article.content)" />
				<!-- eslint-enable vue/no-v-html -->
				<p v-if="article.published_at">
					{{ moment(article.published_at).format("MMM Do YY") }}
				</p>
			</div>
		</div>

		<Bottom />
	</div>
</template>

<script>
	import moment from "moment";
	import Bottom from "@/components/Bottom";

	import {
		getStrapiMedia
	} from "../../utils/medias";
	import {
		getMetaTags
	} from "../../utils/seo";

	export default {
		components: {
			Bottom,
			// Articles,
		},
		async asyncData({
			$strapi,
			params
		}) {
			// 替换链接到配置里的服务器地址 process.env.jikeid
			var ch = function checkcontent(content) {
				return content.replace(/\(\/(\S*)\)/g, function(all, letter) {
					return "(" + process.env.jikeid + "/" + letter + ")";
				});
			}
			const matchingArticles = await $strapi.find("articles", {
				id: params.id,
			});
			// matchingArticles[0].content.replace(
			//   /uploads(\S*)jpg/g,
			//   function (all, letter) {
			//     console.log(`匹配到了${all}`);
			//     return "好的";
			//   }
			// );
			//设置md文档中图片地址准确位置

			let art = matchingArticles[0];
			// if (art.content) {
			//   art.content = art.content.replace(/\(\/(\S*)\)/g, function (all, letter) {
			//     return "(" + process.env.jikeid + "/" + letter + ")";
			//   });
			// }
			art.content = art.content && ch(art.content)
			return {
				article: art,
				global: await $strapi.find("global"),
			};
		},
		data() {
			return {
				apiUrl: process.env.strapiBaseUri,
			};
		},
		methods: {
			checkcontent(content) {
				content.replace(/\(\/(\S*)\)/g, function(all, letter) {
					return "(" + process.env.jikeid + "/" + letter + ")";
				});
			},
			moment,
			getStrapiMedia,
		},
		head() {
			const {
				defaultSeo,
				favicon,
				siteName
			} = this.global;

			// Merge default and article-specific SEO data
			const fullSeo = {
				...defaultSeo,
				metaTitle: this.article.title,
				metaDescription: "好",
				shareImage: this.article.image,
			};

			return {
				titleTemplate: `%s | ${siteName}`,
				title: fullSeo.metaTitle,
				meta: getMetaTags(fullSeo),
				link: [{
					rel: "favicon",
					href: getStrapiMedia(favicon.url),
				}, ],
			};
		},
	};
</script>
